<template>
  <div class="home">
    <div class="left-top">
      <div class="top"><img src="@/assets/image/home/left-top.svg" alt="">
        <h1>评吸烟支总量</h1>

      </div>
      <div class="w100 h100 df-c">
        <ul :class="['w100' ,smokeNumber.length>1?'jc-sb':'jc-c']">
          
          <li v-for=" (item,index) in smokeNumber" :key="index">
            <div></div>
            <div></div>
            <span>{{item}}</span>
          </li>
          <div class="df fd-c jc-sb" style="margin-left: 8px;">
            <span></span>
            <span> 支</span>
          </div>
        </ul>
      </div>
    </div>

    <div class="four-border">
      <span></span><span></span><span></span><span></span>
      <!-- <h3>近三个月烟支总量</h3> -->
      <div class="chat"><month-number></month-number></div>
    </div>

    <div class="four-border">
      <span></span><span></span><span></span><span></span>
      <div class="chat">
        <smoke-number></smoke-number>
      </div>
    </div>
    <!-- <div class="four-border mb0">
      <div class="chat">
        <allowance-chart></allowance-chart>
      </div>
    </div> -->
    <div class="four-border mb0">
      <span></span><span></span><span></span><span></span>
      <div class="chat ">
        <department-number></department-number>
      </div>
    </div>
    <div class="four-border mb0">
      <span></span><span></span><span></span><span></span>
      <div class="chat ">
        <day-month-number></day-month-number>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import MonthNumber from "@/components/MonthNumber.vue";
import SmokeNumber from "@/components/SmokeNumber.vue";
import AllowanceChart from "@/components/AllowanceChart.vue";
import DepartmentNumber from "@/components/DepartmentNumber.vue";
import DayMonthNumber from "../../components/DayMonthNumber.vue";
import http from "@/http/index";
import { ref, onMounted } from "vue";

const smokeNumber = ref([]);
onMounted(async () => {
  const res1 = await get_list("/index/smokeTotal", "get", {});
  console.log("res1", res1);

  smokeNumber.value = Array.from(String(res1.data), Number);
  // console.log(smokeNumber.value);

  // const res2 = await get_list("/index/smokeGroupBrandFromLastThreemonth", "get", {});
  // console.log("res2", res2);

  // const res3 = await get_list("/index/smokeGroupBrand", "get", {});
  // console.log("res3", res3);
  // const res4 = await get_list("/index/smokeGroupOrg", "get", {});
  // console.log("res4", res4);

});

const get_list = async (url, method, data) => {
  const res = await http.corsApi(url, method, data);
  if (res.code == 200) {
  }

  return res;
};
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 30px 30px 8px;
  box-sizing: border-box;
  .left-top {
    .top {
      h1 {
        font-size: 18px;
        font-weight: 600;
        color: #464646;
      }
    }
    ul {
      // padding: 20px 50px;
      box-sizing: border-box;
      display: flex;
     // justify-content: space-between;
      width: 80%;
      li {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 120px;
        width: 26%;
        position: relative;
        > div {
          width: 100%;
          border-radius: 8px;
          height: 47%;
          background-color: #4083e2;
        }
        span {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
          font-size: 64px;
          font-weight: 700;
          
        }
      }
    }
  }
  > div {
    width: 32%;
    // border: 1px solid #000;
    margin-bottom: 50px;
    height: 40%;
    position: relative;

    h3 {
      padding: 8px 12px;
    }

    &:nth-child(1) {
      width: 15%;
      display: flex;
      flex-direction: column;
      .top {
        display: flex;
        align-items: center;
        h3 {
          font-weight: 700;
        }
      }
      img {
        width: 48px;
        height: 48px;
        margin-right: 8px;
      }
    }
    &:nth-child(2) {
      width: 80%;
    }

    &:nth-child(2),
    &:nth-child(3),
    &:nth-child(5),
    &:nth-child(6) {
      position: relative;
      border: 1px solid #ccc;
    }
  }
}

.four-border {
  span {
    &:nth-child(1) {
      position: absolute;
      left: -1.5px;
      top: -1.5px;
      padding: 10px;
      border-style: solid;
      border-color: #4083e2;
      border-width: 3px 0 0 3px;
    }

    &:nth-child(2) {
      position: absolute;
      right: -1.5px;
      top: -1.5px;
      padding: 10px;
      border-style: solid;
      border-color: #4083e2;
      border-width: 3px 3px 0 0;
    }

    &:nth-child(3) {
      position: absolute;
      right: -1.5px;
      bottom: -1.5px;
      padding: 10px;
      border-style: solid;
      border-color: #4083e2;
      border-width: 0 3px 3px 0;
    }

    &:nth-child(4) {
      position: absolute;
      left: -1.5px;
      bottom: -1.5px;
      padding: 10px;
      border-style: solid;
      border-color: #4083e2;
      border-width: 0 0 3px 3px;
    }
  }

  .chat {
    width: 100%;
    height: 100%;
  }

  .bm-smoke {
    padding: 10px;
    box-sizing: border-box;
  }
}
.mb0 {
  margin-bottom: 0 !important;
}
</style>